<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>prop传值验证</title>
</head>
<body>
    <div id="app">
        <father></father>
    </div>

    <script src="vue.js"></script>
    <script>
        Vue.component('father',{
            template:`
            <div>
                {{msg}}
                <child :info="msg" name="zhangsan" age="20" ></child>
            </div>
            `,
            data(){
                return {
                    msg:"nihao!",
                    
                }
            },
        });

        // 拓展 目前JS 所有数据类型：String Number Object（Array，Function，Object），Null，Undefined，NaN
        // 注意 首字母 大写
        // 新的JS数据类型：
        Vue.component('child',{
            // 验证时-使用 props{} 对象！！！！！
            // 注意加 s !!!
            props:{
                // 父组件data值
                info: String,

                // 接受字符串
                name: String,

                // 接受多种数据类型
                age:[String,Number],

                // 默认值-(可以用来子组件为自己设定数据)
                gender:{
                    type:String,
                    default:"male"
                },

                // 接受数组--必须使用函数
                personInfo:{
                    // 接受验证的数据类型写 Object
                    type:[Object,Array],

                    // 简写
                    // default:() => [],

                    // 全写
                    default:function(){
                        return ["a","b"]
                    }
                },

                // 接受Object--必须使用函数
                personData:{
                    // 接受验证的数据类型写 Object
                    type:Object,

                    // 简写-注意加括号 ({}), 否则识别为函数的代码区域括号
                    // default:() => ({}),

                    // 全写
                    default:function(){
                        return {
                            name:"lisi",
                            age:"20",
                        }
                    }
                }
            },
            template:`
            <div>
                <p>{{info}}</p>
                <p>{{name}}</p>
                <p>{{age}}</p>
                <p>{{gender}}</p>
                <p>{{personInfo}}</p>
                <p>{{personInfo[0]}}</p>
                <p>{{personData["name"]}}</p>
                <p>{{personData}}</p>
            </div>
            `,
        });

        new Vue({
            el:"#app",
            data(){
                return {
                    msg:"aaa",
                }
            },
        })
    </script>
    

</body>
</html>